<style>
    .checkboxFive {
        width: 25px;
        float: left;
        position: relative;
        margin: 10px;
    }
    .checkboxFive label {
        cursor: pointer;
        position: absolute;
        width: 25px;
        height: 25px;
        top: 0;
        left: 0;
        background: #eee;
        border: 1px solid #ddd;
    }
    .checkboxFive label:after {
        opacity: 0.2;
        content: '';
        position: absolute;
        width: 9px;
        height: 5px;
        background: transparent;
        top: 6px;
        left: 7px;
        border: 3px solid #333;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .checkboxFive label:hover::after {
        opacity: 0.5;
    }
    .checkboxFive input[type=checkbox]:checked + label:after {
        opacity: 1;
    }
    .circle {
        border: solid 1px #ced4da;
        height: 38px;
        width: 40px;
    }
    .circle a {
        cursor: pointer;
    }
    .circle_inner_play {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 20px;
        border-color: transparent transparent transparent #212529;
        position: absolute;
        top: 50%;
        right: 2%;
        margin: -13px 0 0 -7px;
    }
    .circle_inner_pause {
        position: absolute;
        top: 8px;
        right: 14px;
        font-size: 13px;
    }


</style>
<div class="modal fade" id="add_task_menu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 800px;top: 95px;">
        <div class="modal-content">
            <div class="modal-header" style="background: #dc3545;color: #fff;">
                <h4 class="modal-title" id="myModalLabel">添加闹钟</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
            <form id="clock_data" action="">
                <div class="modal-body">
                    <div class="form-group xs-mb-0 sm-mb-5">
                        <label for="edt-title">任务名称</label>
                        <input class="form-control" name="title" placeholder="任务名称">
                    </div>
                    <div class="row" style="padding:0 20px;">
                        <div class="form-group col-xs-6" style="width:30%;float:left;margin-right:20px;">
                            <label for="edt-year">类型</label>
                            <div class="input-group xs-mb-0">
                                <input class="form-control" name="type" placeholder="类型名">
                            </div>
                        </div>
                        <div class="form-group col-xs-6" style="width:30%;float:left;margin-right:20px;">
                            <label for="edt-month">所需次数</label>
                            <div class="input-group xs-mb-0">
                                <input class="form-control" name="chapter" placeholder="所需次数">
                            </div>
                        </div>
                        <div class="form-group col-xs-6" style="width:29%;float:left;margin-right:20px;">
                            <label for="edt-day">平均所需时间(分钟)</label>
                            <div class="input-group xs-mb-0">
                                <input class="form-control" name="avg_time" placeholder="平均所需时间">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" id="add" class="btn btn-primary">开始</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript">
    $(function(){

    });


    $('#add').on('click',function() {
        var data = $('form').serializeArray();
        var url = '/index/task/addTaskMenu';
        $.ajax({
            type: "POST",
            url: url,
            dataType: "json",
            data: data,
            success: function(data){
                window.location.reload();
            }
        });
    });




</script>